<template>
	<div>
		<!-- 头部查询框 -->
		<el-form ref="searchForm" :inline="true" :model="searchMap" style="margin-top: 20px;" >
			<el-form-item prop="staffCode">
				<el-input v-model="searchMap.staffCode" placeholder="员工工号" style="width: 200px;" ></el-input>
			</el-form-item>
			<el-form-item prop="name">
				<el-input v-model="searchMap.name" placeholder="姓名" style="width: 200px;" ></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" >查询</el-button>
				<el-button @click="restForm('searchForm')">重置</el-button>
			</el-form-item>
		</el-form>
	  <el-table
		:data="tableData"
		style="width: 100%"
		:default-sort = "{prop: 'date', order: 'descending'}"
		>
		<el-table-column
		  type="selection"
		  width="55">
		</el-table-column>
		<el-table-column
		  prop="staffCode"
		  label="员工工号"
		  sortable
		  width="180">
		</el-table-column>
		<el-table-column
		  prop="name"
		  label="姓名"
		  sortable
		  width="180">
		</el-table-column>
		<el-table-column
		  prop="address"
		  label="地址"
		  :formatter="formatter">
		</el-table-column>
		<el-table-column
		  align="right">
		  <template slot="header" slot-scope="scope">
				<el-button type="success" icon="el-icon-plus" circle @click="add"></el-button>
				<el-button type="danger" icon="el-icon-delete" circle></el-button>
		  </template>
		  <template slot-scope="scope">
			<el-button
			  size="mini" round
			  type="warning"
			  @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
		  </template>
		</el-table-column>
	  </el-table>
	  <!-- 分页，添加在div里面 -->
		<el-pagination
		@size-change="handleSizeChange"
		@current-change="handleCurrentChange"
		:current-page="currentPage"
		:page-sizes="[10, 20, 50]"
		:page-size="pageSize"
		layout="total, sizes, prev, pager, next, jumper"
		:total="total">
		</el-pagination>
		<!-- 对话框 -->
		<el-dialog title="供应商编辑" :visible.sync="dialogFormVisible" width="500px">
			<el-form :rules="rules" status-icon ref="pojoForm" :model="pojo"
			label-width="100px" label-position="right" style="width: 400px;">
				<el-form-item label="供应商名称" prop="name">
					<el-input v-model="pojo.name" />
				</el-form-item>
				<el-form-item label="联系人" prop="linkman">
					<el-input v-model="pojo.linkman" />
				</el-form-item>
				<el-form-item label="联系电话" prop="mobile">
					<el-input v-model="pojo.mobile" />
				</el-form-item>
				<el-form-item label="备注" prop="remark">
				<el-input v-model="pojo.remark" type="textarea"
				:autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入地址"
				/>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="pojo.id === undefined ? addData('pojoForm'):
				updateData('pojoForm')">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
  export default {
    data() {
      return {
		pojo: {
			id: null,
			name: '',
			linkman: '',
			mobile: '',
			remark: ''
		},
		dialogFormVisible:false,
		rules:{
			name: [{ required:true,message:'供应商名称不能为空',trigger: 'blur' }],
			linkman: [{ required:true,message:'联系人不能为空', trigger: 'blur' }],
		},
		total: 0, // 总记录数
		currentPage: 1, // 当前页, 默认第1页
		pageSize: 10, // 每页显示条数， 10条
		searchMap: {
			name: '',
			staffCode: '',
		}, // 条件查询
        tableData: [{
          staffCode: 'CH0001',
          name: '老丁',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          staffCode: 'CH0002',
          name: '小梦',
          address: '上海闵行区剑川路950号'
        }, {
          staffCode: 'CH0003',
          name: '老朱',
          address: '徐家汇一号公馆'
        }, {
          staffCode: 'CH0004',
          name: '大逼神',
          address: '东川路大桶大2号'
        }]
      }
    },
    methods: {
		formatter(row, column) {
			return row.address;
		},
		handleSizeChange(val) {
			this.pageSize = val
			this.fetchData()
		},
		handleCurrentChange(val) {
			this.currentPage = val
			this.fetchData()
		},
		// 表单重置，
		// 在 el-form-item 标签属性 prop 上, 指定了字段名, 重置才会生效
		restForm(formName) {
			this.$refs[formName].resetFields();
		},
		add(){
			this.dialogFormVisible = true
			this.$nextTick(() => {
			// this.$nextTick()它是一个异步事件，当渲染结束 之后 ，它的回调函数才会被执行
			// 弹出窗口打开之后 ，需要加载Dom, 就需要花费一点时间，我们就应该等待它加载完dom之后，再进行调
			//用resetFields方法，重置表单和清除样式
			this.$refs['pojoForm'].resetFields()
			})
		}
    }
  }
</script>